<template>
	<view>
		<view class="top_but">
			<view class="banmi_flex j-b">
				<view class="banmi_flex j-c a-c" style="width: 180rpx;height: 100rpx;">
					<text>编辑</text>
				</view>
				<view class="">
					<button @click="on_close" class="banmi_flex j-c a-c" style="width: 120rpx;height: 100rpx;">
						<text>关闭</text>
					</button>
				</view>
			</view>
		</view>

		<view style="padding:  0 20rpx;" v-if="is_shows">
			<view class="banmi_flex" style="padding-top: 20rpx;">
				<view class="" style="width: 70%;padding-right: 20px;">
					<scroll-view class="" scroll-y="true" style="height: 700px;">
						<view class="p-b-10">
							<text class="f-w-800">前端界面</text>
							<text class="m-l-10 c-7" v-if="crud_find.type=='edit'">只显示前端输入框</text>
						</view>
						<view class="banmi_flex j-c"
							v-if="crud_find.type=='pass' || crud_find.type=='dels' || crud_find.type=='refuse' ">
							<view class="b_y" style="width:700rpx;border: solid 2rpx #ccc">
								<view class="banmi_flex j-c f-w-800 p-t-b-10">
									<text class="f-20">{{pass['name']}}</text>
								</view>
								<view class="banmi_flex j-c ">
									<view @click="mousedown1" class="p-10" :class="items_index==0?'pass_0xz':'pass_0'">
										<text class="f-18">{{pass['text']}}</text>
									</view>
								</view>
								<view class="banmi_flex j-c ">
									<div class="container" style="width: 500rpx;">
										<div :id="index" draggable="true" style="width: 100%;padding: 20px 0;"
											class="aaaa" v-for="(item,index) in field_data_list" :key="index"
											:itemkey="item.key" @mousedown="mousedown" v-if="item.value_type=='前端传值'">
											<div :id="index" :class="items_index==index?'xz_boxxx':'boxxx'"
												draggable="true">
												<template v-if="item.input_box=='text'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<input draggable="true" :id="index" type="text"
																v-model="item.placeholder" class="b_y c-7" style="width: 90%;height: 40px;border: solid 2rpx #DCDCDC;margin-left: 20rpx;
															padding: 0 20rpx">
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='content'">
													<div class="p-20" draggable="true" :id="index">
														<div class="p-t-10" v-if="item.value_type=='前端传值'">
															<BmEditor @change="on_Editor" disabled="disabled"
																mode="default" :height="400"
																:placeholder="item.placeholder">
															</BmEditor>
														</div>
													</div>
												</template>
												<template v-if="item.input_box=='img'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">

														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<upImg ref="upimg" :val='1' name="图片" :count="1"
																t_type="images" @confirm="confirm_img">
															</upImg>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='video'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<upImg ref="upimg" :val='1' name="视频" :count="1"
																t_type="video" @confirm="confirm_video">
															</upImg>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='time'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<uni-datetime-picker style="width: 700rpx;margin-left: 20rpx;
															padding: 0 20rpx" type="datetime" placeholder="请选择时间">
															</uni-datetime-picker>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='day'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<uni-datetime-picker type="date" placeholder="请选择时间" style="width: 700rpx;margin-left: 20rpx;
															padding: 0 20rpx">
															</uni-datetime-picker>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='switch'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div class="m-l-10" v-if="item.value_type=='前端传值'"
															draggable="true" :id="index" style="width: 700rpx">
															<switch :checked="true" @change="changes_witch" />
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='city'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<uni-data-picker style="width: 740rpx;margin-left: 5rpx;height: 40px;
															padding: 0 20rpx" :localdata="provinceData">
															</uni-data-picker>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='business_time'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div v-if="item.value_type=='前端传值'" draggable="true"
															:id="index">
															<uni-datetime-lot style="width: 740rpx;margin-left: 5rpx;height: 40px;
															padding: 0 20rpx" placeholder="营业时间">
															</uni-datetime-lot>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='checkbox'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div class="m-l-10" v-if="item.value_type=='前端传值'"
															draggable="true" :id="index">
															<uni-data-checkbox :localdata="item.input_box_val"
																mode="default"></uni-data-checkbox>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='file_upload'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div class="m-l-10 banmi_flex" v-if="item.value_type=='前端传值'"
															draggable="true" :id="index">
															<uni-easyinput :placeholder="item.placeholder">
															</uni-easyinput>
															<upKey class="m-l-10" :val='1' name="key">
															</upKey>
														</div>
													</view>
												</template>
												<template v-if="item.input_box=='select'">
													<view class="banmi_flex a-c p-10" draggable="true" :id="index">
														<div class="m-l-10" v-if="item.value_type=='前端传值'"
															draggable="true" style="width: 740rpx;" :id="index">
															<uni-data-select isdata="data"
																:localdata="item.input_box_val"
																:placeholder="item.placeholder">
															</uni-data-select>
														</div>
													</view>
												</template>
											</div>
										</div>
									</div>
								</view>

								<view class="banmi_flex j-c p-10">
									<button @click="add_pass()" class="b-y" style="padding: 0rpx 20rpx;">
										<text class="f-14" style="color: #1E90FF;">新增输入框 + </text>
									</button>
								</view>

								<view class="p-20 banmi_flex j-s">
									<view class="">
										<button class="cff" size="mini" type="default"
											style="background-color: #D3D3D3;width: 60px;">{{pass.cancellation}}</button>
									</view>
									<view class="">
										<button size="mini" type="primary"
											style="background-color: #1E90FF;width: 60px;">{{pass.confirm}}</button>
									</view>
								</view>
							</view>
						</view>

						<div class="container" v-if="crud_find.type=='edit'">
							<zuEditPost :h_list_validate="h_list_validate" :field_list="field_data_list"
								@chat_items_index="chat_items_index"> </zuEditPost>
						</div>
						<div class="container" v-if="crud_find.type=='detail'">
							<diylistview :h_list_validate="h_list_validate" :field_list="field_data_list"
								@chat_items_index="chat_items_index"> </diylistview>
						</div>


					</scroll-view>


					<view class="banmi_flex a-c  p-b-10" style="padding-top: 20rpx;">
						<view class="f-14 c-7" style="width: 100px;">
						</view>
						<view class="">
							<button type="default" style="width: 80px;" size="mini" @click="subQuestion"
								class="sub_btn">确认</button>
						</view>
					</view>

				</view>



				<view class="" style="flex:1;">
					<view class="p-b-10">
						<text class="f-w-800">数据类型</text>
					</view>
					<view class="p-20" style="border: solid 2rpx #DCDCDC;"
						v-if="crud_find.type=='pass' || crud_find.type=='dels' || crud_find.type=='refuse' ">
						<template>
							<view class="p-t-10" style="width: 400rpx;">
								<uni-easyinput v-model="pass.name">
								</uni-easyinput>
							</view>
							<view class="p-t-10" style="width: 400rpx;">
								<uni-easyinput v-model="pass.text">
								</uni-easyinput>
							</view>
							<view class="p-t-10" style="width: 400rpx;">
								<uni-easyinput v-model="pass.cancellation">
								</uni-easyinput>
							</view>
							<view class="p-t-10" style="width: 400rpx;">
								<uni-easyinput v-model="pass.confirm">
								</uni-easyinput>
							</view>
							<template v-if="crud_find.type!='dels'">
								<view class="p-t-10" style="width: 400rpx;">
									<uni-easyinput v-model="pass.status" placeholder="示例 status = 1 审核中 = 1">
									</uni-easyinput>
								</view>
								<view class="p-t-10" style="width: 400rpx;">
									<text class="cred f-13">只有审核中才会显示按钮</text>
								</view>
							</template>


						</template>
					</view>

					<view class="p-20" style="border: solid 2rpx #DCDCDC;">
						<view class="cred f-14">
							{{crud_find.type=='view'?'输出字段':'更新字段,主键无需选择已自动关联'}}
						</view>
						<DiyFieldWhere :crud_find="crud_find" :where_type="0" @up_add="up_add_open"
							:items_index="items_index" :ziduan_list="ziduan_list1" :field_list="field_data_list">
						</DiyFieldWhere>
					</view>
				</view>



			</view>
		</view>

		<!-- 选择器设置组件 -->

		<diyListSelector ref="diyListSelector1" @change="change_diyListSelector">


		</diyListSelector>





	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'

	import provinceData from '@/components/fd-picker/city-china.json';
	import DiyFieldWhere from './diy_field_where.vue';
	import zuEditPost from './zu_edit_post.vue';
	import diylistview from './diy_list_view.vue';
	import diyListSelector from './diy_list_selector.vue';
	export default {
		components: {
			DiyFieldWhere,
			zuEditPost,
			diylistview,
			diyListSelector
		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			windowHeight: {
				type: Number,
				default () {
					return 0;
				}
			},
			crud_type: {
				type: String,
				default () {
					return '';
				}
			},
			zhujian_id: {
				type: String,
				default () {
					return '';
				}
			},
			//列表查询条件 同步选择器数据
			list_where_data: {
				type: Array,
				default () {}
			},
			ziduan_list: {
				type: Array,
				default () {}
			},
			crud_find: {
				type: Object,
				default () {}
			},
			windowWidth: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				find: {
					name: '',
				},
				class_list: [{
					"text": "自定义数据",
					"value": 0
				}, {
					"text": "从数据库获取",
					"value": 1
				}],
				provinceData: provinceData,
				start_val: '',
				close_val: '',
				checkbox_list: [{
					"text": "按钮",
					"value": 0
				}],
				where: 'where',
				//前端类型
				front_list: [{
						"value": 'text',
						"text": "单文本框", //ok
					},
					{
						"value": 'content',
						"text": "富文本框", //ok
					},
					{
						"value": 'img',
						"text": "图片选择", //ok
					},
					{
						"value": 'video',
						"text": "视频选择", //ok
					},
					{
						"value": 'business_time',
						"text": "营业时间",
					},
					{
						"value": 'time',
						"text": "时间选择",
					},
					{
						"value": 'day',
						"text": "日期选择",
					},
					{
						"value": 'switch',
						"text": "开关按钮", //ok
					},
					{
						"value": 'checkbox',
						"text": "多选按钮", //ok
					},
					{
						"value": 'select',
						"text": "单列下拉框", //ok
					},
					{
						"value": 'file_upload', //ok
						"text": "文件上传",
					},
					{
						"value": 'city', //ok
						"text": "城市选择器",
					},
					{
						"value": 'map', //ok
						"text": "坐标选择",
					},
					{
						"value": 'colour', //ok
						"text": "颜色选择器",
					}
				],
				where_list: [{
						"value": '=',
						"text": "等于",
					},
					{
						"value": '>=',
						"text": "大于等于",
					},
					{
						"value": '<>',
						"text": "不等于",
					},
					{
						"value": '<',
						"text": "小于",
					},
					{
						"value": '<=',
						"text": "小于等于",
					},
					{
						"value": 'like',
						"text": "模糊查询搜索",
					}
				],
				where_val: [{
						"value": '固定值',
						"text": "固定值",
					},
					{
						"value": "前端传值",
						"text": "前端传值",
					},
					{
						"value": "后端生成",
						"text": "后端生成",
					},
				],
				ziduan_list1: [],
				h_list_validate: [],
				field_where_list: [{
					'field': '', //字段
					'where': '', //字段条件
					'value_type': '', //值类型
					'value': '', //值
					'empty': true, //true=可以为空 false不可以为空
					'verify': '', //验证类型
					'verify_val': '', //验证名称 如某某不得为空
					'verify_id': '',
					'max_number': '', //最大数字
				}],
				field_data_list: [],
				list_kong: [{
						"value": 'true',
						"text": "可以为空",
					},
					{
						"value": 'false',
						"text": "必须有值",
					},
				],
				q_list_validate: [],
				items_index: '0',
				input_box_item: '',
				pass: {
					name: '提示',
					text: '确认通过审核吗?',
					cancellation: '取消',
					confirm: '确认',
					status: ''
				},
				class_index: 0,
				input_box_dbname: {},
				db_list: [],
				select_field: [],
				db_name_list: [],
				db_name_list2: [],
				up_add_is: false,
				is_shows: false,
				checkbox_find: {},
				select_crud_find: {
					"type": "edit"
				}


			}
		},
		mounted() {


			this.field_where_list[0]['field'] = this.zhujian_id;
			this.field_where_list[0]['where'] = '=';
			this.field_where_list[0]['value_type'] = '前端传值';
			this.field_where_list[0]['empty'] = 'false';
			this.field_where_list[0]['verify'] = 0;
			this.field_where_list[0]['verify_id'] = 2;
			this.field_where_list[0]['verify_val'] = this.zhujian_id;
			this.field_where_list[0]['max_number'] = 20;



			var ziduan_list = []
			for (var i = 0; i < this.ziduan_list.length; i++) {
				var find = {
					'text': this.ziduan_list[i]['Field'],
					'value': this.ziduan_list[i]['Field']
				}
				ziduan_list.push(find);
				var name = ''
				var placeholder = '';
				name = '输入框名称'
				placeholder = '请输入' + this.ziduan_list[i]['Field']
				if (this.crud_find.type == 'edit') {


				} else if (this.crud_find.type == 'dels') {
					this.pass.name = '提示'
					this.pass.text = '确认删除吗?'
				} else if (this.crud_find.type == 'refuse') {
					this.pass.name = '请输入拒绝理由'
					this.pass.text = ''
				}

				if (this.zhujian_id != this.ziduan_list[i]['Field']) {
					let field = this.ziduan_list[i]['Field'];
					let input_box = 'text';
					let value_type = '前端传值';
					let value = ''
					let verify_id = '';
					let input_box_val = ''
					uni.setStorageSync('crud_find_type', this.crud_find.type)


					if (this.crud_find.type == 'edit') {



						if (field.indexOf("img") != -1) {
							input_box = 'img'
							name = "图片"
						} else if (field.indexOf("imgage") != -1) {
							input_box = 'img'
							name = "图片"
						} else if (field.indexOf("creation_time") != -1) {
							input_box = 'text'
							value_type = '后端生成'
							value = 0;
							verify_id = 7;
						} else if (field.indexOf("content") != -1) {
							input_box = 'content'
							name = "内容"
						} else if (field.indexOf("open") != -1) {
							input_box = 'switch'
							name = "是否上架"
							input_box_val = {
								start_val: 2,
								close_val: 1
							}

						} else if (field.indexOf("city") != -1) {
							input_box = 'city'
							name = "城市"
						} else if (field.indexOf("day") != -1) {
							input_box = 'day'
							name = "日期"
						} else if (field.indexOf("business_time") != -1) {
							input_box = 'business_time'
							name = "营业时间"
						} else if (field.indexOf("video") != -1) {
							input_box = 'video'
							name = "视频"
						} else if (field.indexOf("file") != -1) {
							input_box = 'file_upload'
							name = "文件上传"
						} else if (field.indexOf("status") != -1) {
							input_box = 'text'
							value_type = '固定值'
							value = 2;
						} else if (field.indexOf("checkbox") != -1) {
							name = "多选按钮"
							input_box = 'checkbox'
							value_type = '前端传值'
							value = 0;
							input_box_val = [{
									"value": '0',
									"text": "可以为空",
								},
								{
									"value": '1',
									"text": "必须有值",
								},
								{
									"value": '2',
									"text": "按钮1",
								},
								{
									"value": '3',
									"text": "按钮2",
								},
							]
						} else if (field.indexOf("nav_id") != -1) {
							name = "单列下拉框"
							input_box = 'select'
							value_type = '前端传值'
							value = 0;
							input_box_val = [{
									"value": '0',
									"text": "下拉框0",
								},
								{
									"value": '1',
									"text": "下拉框1",
								},
								{
									"value": '2',
									"text": "下拉框2",
								},
								{
									"value": '3',
									"text": "下拉框3",
								},
							]
						}
					}
					var where = this.field_where_list


					var find = {
						'field': this.ziduan_list[i]['Field'], //字段
						'where': '=', //字段条件
						'value_type': value_type, //值类型
						'value': value, //值
						'empty': 'true', //是否可以为空
						'verify': '', //验证类型
						'verify_val': '', //验证值
						'verify_id': verify_id,
						'max_number': '', //最大数字
						'name': name,
						'placeholder': placeholder,
						'key': this.ziduan_list[i]['Field'],
						'input_box': input_box, //编辑框类型
						'input_box_val': input_box_val, //调用自定义数据	
						'input_box_dbname': {
							where: [{
								'field': '', //字段
								'where': '', //字段条件
								'value_type': '', //值类型
								'value': '', //值
								'empty': true, //true=可以为空 false不可以为空
								'verify': '', //验证类型
								'verify_val': '', //验证名称 如某某不得为空
								'verify_id': '',
								'max_number': '', //最大数字
							}],
							db_name: '',
							text: '', //字段 名称
							value: '' //字段 值
						}, //从数据表获取数据
						'time': '',
						'class_index': 0,

					}
					if (!this.items_index) {
						this.items_index = this.ziduan_list[i]['Field'];
					}
					//判断搜索是否设置了下拉 保持一致
					this.list_where_data.forEach((item, index) => {
						if (item['field'] == field && item.class_index >= 0) {
							find.input_box = item['input_box']
							find.input_box_val = item['input_box_val']
							find.input_box_dbname = item['input_box_dbname']
							find.class_index = item['class_index']

						}
					});



					this.field_data_list.push(find);
				}


			}
			// console.log("this.field_data_list: " + JSON.stringify(this.field_data_list));

			if (this.crud_find.type == 'pass' || this.crud_find.type == 'refuse' || this.crud_find.type == 'dels') {
				this.field_data_list[0]['value_type'] = '固定值';
				this.field_data_list = this.field_data_list.splice(0, 1);
				this.items_index = '0';
			}
			if (this.crud_find.find) {
				this.field_data_list = this.crud_find.find.data;
				this.field_where_list = this.crud_find.find.where;
				this.pass.name = this.crud_find.find.ref.name;
				this.pass.text = this.crud_find.find.ref.text;
				this.pass.cancellation = this.crud_find.find.ref.cancellation;
				this.pass.confirm = this.crud_find.find.ref.confirm;
				this.pass.status = this.crud_find.find.ref.status;
			}



			this.ziduan_list1 = ziduan_list;
			this.init();
			if (this.crud_find.type == 'edit' || this.crud_find.type == 'view') {
				this.diy_init();
			}
			this.db_init();



		},


		methods: {
			chat_items_index(index) {
				this.items_index = index;
			},


			db_init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					var db_list = ret.data.table_info;
					this.db_list = [];
					for (var i = 0; i < db_list.length; i++) {
						db_list[i]['text'] = db_list[i]['Name'];
						db_list[i]['value'] = db_list[i]['Name'];
						var reg = RegExp(/app_plugin/);
						if (reg.exec(db_list[i]['Name'])) {
							this.db_list.push(db_list[i]);
						}

					}





				})
			},

			add_pass() {
				var find = {
					'field': this.ziduan_list1[this.field_data_list.length + 1]['value'], //字段
					'where': '', //字段条件
					'value_type': '前端传值', //值类型
					'value': '', //值
					'empty': 'true', //是否可以为空
					'verify': '', //验证类型
					'verify_id': '',
					'verify_val': '', //验证值
					'max_number': '', //最大数字
					'name': '输入框',
					'placeholder': '请输入',
					'key': this.ziduan_list1[this.field_data_list.length + 1]['value'],
					'input_box': 'text', //编辑框类型
					'input_box_val': '',

				}
				this.items_index = this.ziduan_list1[this.field_data_list.length + 1]['value'];
				this.field_data_list.push(find);
			},



			changes_witch() {

			},
			confirm_video() {

			},
			confirm_img() {

			},
			on_Editor(e) {

			},
			up_add_close() {
				// this.field_data_list[this.input_box_index]['input_box'] = 'text'
				this.$refs.up_add.close();
			},
			up_add_ok() {
				this.field_data_list[this.input_box_index]['class_index'] = this.class_index
				if (this.class_index == 1) {

					this.field_data_list[this.input_box_index]['input_box_dbname'] = this.input_box_dbname;


					this.input_box_dbname = {
						where: [{
							'field': '', //字段
							'where': '', //字段条件
							'value_type': '', //值类型
							'value': '', //值
							'empty': true, //true=可以为空 false不可以为空
							'verify': '', //验证类型
							'verify_val': '', //验证名称 如某某不得为空
							'verify_id': '',
							'max_number': '', //最大数字
						}],
						db_name: '',
						text: '', //字段 名称
						value: '' //字段 值
					}
					this.field_data_list[this.input_box_index]['input_box_val'] = this.db_name_list
					this.field_data_list[this.input_box_index]['input_box'] = this.input_box_item
					this.db_name_list = [];
					this.$refs.up_add.close();
					return
				}



				if (this.input_box_item == 'switch') {
					if (!this.start_val) {
						uni.showToast({
							title: '请输入开启的值',
							icon: 'error'
						})
						return
					}
					if (!this.close_val) {
						uni.showToast({
							title: '请输入关闭的值',
							icon: 'error'
						})
						return
					}
					this.field_data_list[this.input_box_index]['input_box_val'] = {
						start_val: this.start_val,
						close_val: this.close_val
					}
					this.start_val = '';
					this.close_val = '';
				}
				if (this.input_box_item == 'checkbox') {
					this.field_data_list[this.input_box_index]['input_box_val'] = this.checkbox_list
					this.checkbox_list = [{
						"text": "默认",
						"value": 0
					}]

				}
				if (this.input_box_item == 'select') {
					this.field_data_list[this.input_box_index]['input_box_val'] = this.checkbox_list
					this.checkbox_list = [{
						"text": "默认",
						"value": 0
					}]
				}



				this.field_data_list[this.input_box_index]['input_box'] = this.input_box_item

				this.$refs.up_add.close();

			},
			change_diyListSelector(find) {
				this.field_data_list[this.input_box_index] = find
			},
			up_add_open(index, item) {
				this.input_box_index = index;
				this.input_box_item = item;
				var find = this.field_data_list[index];
				find['input_box_item'] = item
				this.$refs['diyListSelector1'].open(find);
			},
			mousedown(e) {

				var index = e.currentTarget.id;

				this.items_index = index;
			},
			mousedown1() {
				this.items_index = '0';
			},
			longpress(e) {
				if (e.target.id && e.target.id >= 0) {
					this.diy_ipt_xz = e.target.id

				}


			},
			/**
			 * 数组元素交换位置
			 * @param {array} arr 数组
			 * @param {number} index1 添加项目的位置(当前数组点击的索引)
			 * @param {number} index2 删除项目的位置(要移动到数组具体位置的索引)
			 */
			handleSwapArray(arr, index1, index2) {
				let that = this;
				if (index1 && index1 >= 0) {
					arr[index1] = arr.splice(index2, 1, arr[index1])[0];
					return arr;
				}
				return arr;

			},
			diy_init() {

				let that = this;
				that.clid_id = 0;
				let old_id = 0;
				setTimeout(function() {
					const container = document.querySelector('.container');
					container.ondragstart = (e) => {
						//监听用户起始选择的id

						that.clid_id = e.target.id;


					};

					container.ondragover = (e) => { //拖动行驶中一直触发

						e.preventDefault();
						// if (e.target.id != old_id) {
						// 	old_id =e.target.id 
						// 	that.items = that.handleSwapArray(that.items, e.target.id, clid_id)
						// }

						// console.log('over', e.target.id);
					};

					container.ondrop = (e) => { //放手
						// console.log('放手', e.target.id);

						if (e.target.id && e.target.id >= 0) {
							that.field_data_list = that.handleSwapArray(that.field_data_list, e.target.id, that
								.clid_id)
						}

					};



				}, 500);

			},


			init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					this.p_list = ret.data.p_list;
					this.q_list_validate = ret.data.q_list_validate;
					for (var i = 0; i < this.q_list_validate.length; i++) {
						this.q_list_validate[i]['text'] = this.q_list_validate[i]['name'];
						this.q_list_validate[i]['value'] = i;
					}


					this.h_list_validate = ret.data.h_list_validate;
					for (var i = 0; i < this.h_list_validate.length; i++) {
						this.h_list_validate[i]['text'] = this.h_list_validate[i]['name'];
						this.h_list_validate[i]['value'] = i;
					}

					for (var i = 0; i < this.p_list.length; i++) {
						this.p_list[i]['text'] = this.p_list[i]['plugin_name'];
						this.p_list[i]['value'] = this.p_list[i]['catalogue'];
					}
					this.table_info = ret.data.table_info;
					this.list = [];
					for (var i = 0; i < this.table_info.length; i++) {
						this.table_info[i]['text'] = this.table_info[i]['Name'];
						this.table_info[i]['value'] = this.table_info[i]['Name'];
						var reg = RegExp(/app_plugin/);
						if (reg.exec(this.table_info[i]['Name'])) {
							this.list.push(this.table_info[i]);
						}

					}

					this.is_shows = true;

				})
			},
			change_where_val() {

			},
			change_where_ziduan() {

			},
			change_where() {

			},
			on_close() {
				this.popup.close()
			},
			subQuestion() {

				var find = {
					where: this.field_where_list,
					data: this.field_data_list,
					ref: this.pass
				}

				this.$emit('img_ok', find)
				this.popup.close()
			},


		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	.pass_0 {
		border: #C0C0C0 3px dashed;
		width: 465rpx;
	}

	.pass_0xz {
		border: solid 3px red;

		width: 465rpx;
	}

	.xz_boxxx {

		align-items: center;

		width: 100%;
		/* 	border: red 3px dashed; */
		border: solid 3px red;
	}

	.boxxx {

		align-items: center;

		width: 100%;
		border: #C0C0C0 3px dashed;

	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>